Table of Contents

• 讓手機連結跟電腦一樣的IP
• 取地理資料
• References

今天學習使用Geolocation API，可以捕捉地理位置與資訊。
Mac使用者可以用Xcode模擬今天的程式碼，或者要有手機模擬器、拿手機直接測試這些功能。

讓手機連結跟電腦一樣的IP

安裝npm並使用npm start找local的IP。
那因為我用vscode的live server寫的，首先讓手機跟電腦連到同個網路，接下來的具體方法可參考live server vscode on another computer，這個也是之前在學寫RWD的網頁，工作室的夥伴指導的。

連線之後就會一樣有畫面可以嘗試。

取地理資料

使用Navigator.geolocation屬性回傳Geolocation物件，使用watchPosition()的方法，會在裝置改變位置時呼叫，從Geolocation中可以取得位置相關資料。

從中取得速度資訊，並且插入在元素中。

const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed-value');

navigator.geolocation.watchPosition((data)=>{
      speed.textContent = data.coords.speed;
      arrow.style.transform = `rotate(${data.coords.heading}deg)`;
})

watchPosition()的第一個參數可以寫成功時的callback function，第二個則可以加上錯誤訊息。

完整的寫法就會是：

navigator.geolocation.watchPosition((data)=>{
  speed.textContent = data.coords.speed;
  arrow.style.transform = `rotate(${data.coords.heading}deg)`;
}, (error) => {
  console.error(error);
});

References

Geolocation
工作室夥伴